{% extends "base.html" %}
{% load static %}



{% block title %}Plot Kinetics - {{ network.title }}{% endblock %}

{% block navbar_items %}
<li><a href="{% url 'pdep:index' %}">Pressure Dependent Networks</a></li>
<li><a href="{% url 'pdep:network-index' networkKey=networkKey%}">{{ network.title }}</a></li>
<li><a href="{% url 'pdep:network-plot-kinetics' networkKey=networkKey%}">Plot Kinetics</a></li>
{% endblock %}

{% block sidebar_items %}
{% include "networkSidebar.html" %}
{% endblock %}
{% block page_title %}Plot Kinetics - {{ network.title }}{% endblock %}

{% block extrahead %}
<script src="https://code.highcharts.com/6/highcharts.js"></script>
<script src="{% static 'js/highcharts.theme.js' %}" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function() {

    var k_series = new Array();
    var k_series2 = new Array();
    
    {% for products, kinetics in kineticsSet.items %}
    var kseries = new Array();
    {{ kinetics|get_rate_coefficients:user }}
    {% include "kineticsModel.js" %}
    k_series.push(['{{ products }}', kseries[0][1]]);
    k_series2.push(['{{ products }}', kseries2[0][1]]);
    {% endfor %}
    
    MathJax.Hub.Queue(function() {
        plotKinetics('plotk', k_series);
        plotKineticsVsP('plotkvsP', k_series2);
    });

});

{% include "kineticsPlot.js" %}
</script>
{% endblock %}

{% block page_body %}

<form enctype="multipart/form-data" action="" method="POST">{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<p><input type="submit" value="Generate" id="submit"/></p>
</form>

<div id="plotkvsP" style="width: 80%; height: 80%; margin: auto;"></div>
<div id="plotk" style="width: 80%; height: 80%; margin: auto;"></div>

{% endblock %}
